<template>
    <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
        <div style="padding-bottom: 10px;height: 36px;" v-for="(item, index) in listData" :key="index">
            <el-alert type="info" :closable="false">
                <template slot="title">
                    <div class="scrollItem">
                        <div class="time">{{ $day(item.date).format('YYYY-MM-DD HH:mm:ss') }}</div>
                        <div>
                            <span>{{ item.title }}</span>

                        </div>
                    </div>

                </template>
            </el-alert>
        </div>

    </vue-seamless-scroll>
</template>
  
<script>
import vueSeamlessScroll from "vue-seamless-scroll";

const typeNum = {
    CRITICAL: 'info',
    WARNING: 'warning'
}

export default {
    name: "Example04Basic",
    components: {
        vueSeamlessScroll,
    },
    props: ['datas'],
    data() {
        return {
            typeNum,
            listData: [
                {
                    title: "gn1温度达到98C度",
                    date: "2024-02-16 12:20:14",
                },
                {
                    title: "cn1内存使用率过高",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "cn3,cn4,gn1节点掉线，请检查！",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第四行无缝滚动第四行",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第五行无缝滚动第五行",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第六行无缝滚动第六行",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第七行无缝滚动第七行",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第八行无缝滚动第八行",
                    date: "2024-02-16 12:19:07",
                },
                {
                    title: "无缝滚动第九行无缝滚动第九行",
                    date: "2024-02-16 12:19:07",
                },
            ],
            classOption: {
                singleHeight: 44
            },
        };
    },
};
</script>
  
<style lang="scss" scoped>
.warp {
    height: 180px;
    margin: 0 auto;
    overflow: hidden;
}
.scrollItem{
    display: flex;
    justify-content: space-between;
}
.time{
    width: 150px;
}
</style>